.card {
  @apply -shadow-sm -rounded -ring-1 -ring-border -ring-opacity-5 hover:-shadow-md -transition-[box-shadow,border,color,background-color] -bg-canvas -relative -min-h-[28px];
}

.card-heading,
.card-header,
.card-content,
.card-footer {
  @apply -py-1 -px-2
}
.card-heading {
  @apply -flex -items-center -gap-2;
}
.card-icon {
  @apply -opacity-50;
}
.card-header {
  @apply -bg-surface;
}
.card-content {
  @apply -flex -flex-col -gap-1;
}
.card-actions {
  @apply -absolute -right-0.5 -top-0.5;
}
.card-actions + .card-heading {
  @apply -pr-7;
}
.card-subtitle {
  @apply -text-sm -text-gray-500;
}

.card.selected {
  @apply -ring-primary-400 -ring-1 -bg-primary-50;
}
